<!-- 上传图片组件 -->
<template>
	<view>
		<!-- 选择图片 -->
		<uni-file-picker 
		limit="9" 
		title="最多选择9张图片"
		v-model="imageValue" 
		fileMediatype="image" 
		mode="grid" 
		@select="select" 
		@progress="progress" 
		@success="success" 
		@fail="fail" 
		ref="files" 
		:auto-upload="false"
		></uni-file-picker>
		
		<!-- 预览图片 -->
		<!-- <view class="image-preview" v-if="imageValue.length > 0">
			<view class="image-list">
				<view class="image-item" v-for="(item, index) in imageValue" :key="index">
					<image :src="item.url" mode="aspectFill" @click="previewImage(index)"></image>
					<view class="delete-btn" @click="deleteImage(index)">×</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script setup>
	import { ref, watch } from 'vue';
	
	const props = defineProps({
		modelValue: {
			type: Array,
			default: () => []
		}
	})
	
	const emit = defineEmits(['update:modelValue'])
	
	// 上传的图片
	const imageValue = ref(props.modelValue || []);
	
	// 监听外部值变化
	watch(() => props.modelValue, (newVal) => {
		if(newVal) {
			imageValue.value = newVal
		}
	})
	
	// 选择文件
	async function select(e) {
		try {
			// const tempFiles = e.tempFiles[0]
			// console.log('选择的文件:', tempFiles)
			

			console.log(e.tempFiles[0].file);
			let file = e.tempFiles[0];
			
			uni.uploadFile({
				url: 'http://localhost:3000/api/items',
				filePath: file.path,
				name: 'images',  // 改为 'images'
				formData: {
					title: '你的物品标题',
					tags: JSON.stringify(['标签1', '标签2']),
					location: '物品位置',
					description: '物品描述'
				},
				success: (uploadFileRes) => {
					try {
						console.log('服务器原始响应:', uploadFileRes);
						
						// 检查响应数据是否为有效的JSON
						if (uploadFileRes.data && typeof uploadFileRes.data === 'string') {
							// 尝试解析JSON
							let responseData = JSON.parse(uploadFileRes.data);
							
							// 检查响应是否成功
							if (responseData && responseData.success) {
								// 更新图片列表
								const newImage = {
									url: responseData.data,
									name: file.name,
									size: file.size,
									extname: file.extname
								};
								
								imageValue.value = [...imageValue.value, newImage];
								// 发送更新事件
								emit('update:modelValue', imageValue.value);
								
								console.log('上传成功，图片路径:', responseData.data);
							} else {
								console.error('服务器返回错误:', responseData);
								uni.showToast({
									title: '上传失败: ' + (responseData.message || '未知错误'),
									icon: 'none'
								});
							}
						} else {
							console.error('服务器返回非JSON数据:', uploadFileRes.data);
							uni.showToast({
								title: '服务器返回格式错误',
								icon: 'none'
							});
						}
					} catch (parseError) {
						console.error('解析响应数据失败:', parseError);
						console.log('原始响应数据:', uploadFileRes.data);
						uni.showToast({
							title: '解析响应数据失败',
							icon: 'none'
						});
					}
				},
				fail:(err)=>{
					console.log("上传失败：",err);
					uni.showToast({
						title: '上传失败: ' + (err.errMsg || '未知错误'),
						icon: 'none'
					});
				}
			})
			// 处理每个文件

		
		} catch(err) {

		}
	}
	
	// 预览图片
	function previewImage(index) {
		const urls = imageValue.value.map(item => item.url)
		uni.previewImage({
			urls,
			current: urls[index]
		})
	}
	
	// 删除图片
	function deleteImage(index) {
		imageValue.value.splice(index, 1)
		emit('update:modelValue', imageValue.value)
	}
	
	// 获取上传进度
	function progress(e) {
		console.log('上传进度：', e)
	}
	
	// 上传成功
	function success(e) {
		console.log('上传成功')
	}
	
	// 上传失败
	function fail(e) {
		console.error('上传失败：', e)
		uni.showToast({
			title: '上传失败',
			icon: 'none'
		})
	}
	
	// 清除数据方法
	function clearData() {
		imageValue.value = []
		emit('update:modelValue', [])
	}
</script>

<style lang="scss" scoped>
.image-preview {
	margin-top: 20rpx;
	
	.image-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		
		.image-item {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
			
			.delete-btn {
				position: absolute;
				top: -20rpx;
				right: -20rpx;
				width: 40rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				border-radius: 50%;
				font-size: 32rpx;
			}
		}
	}
}
</style>